<!--  -->
<template>
<div>
    <div v-if="type=='json'">
        <pre>{{datajson}}</pre>
    </div>
    <div v-if="type=='html'">
        <div style="margin-top:10px;">
            <el-row style="padding:5px 0;border-bottom:1px solid #ddd;">
                <el-col :span="3">
                    <div>
                        <el-tag>_index</el-tag>
                    </div>
                </el-col>                
                <el-col :span="21">
                    <div>
                        {{datahtml._index}}
                    </div>
                </el-col>                
            </el-row>
            <el-row style="padding:5px 0;border-bottom:1px solid #ddd;">
                <el-col :span="3">
                    <div>
                        <el-tag>_id</el-tag>
                    </div>
                </el-col>                
                <el-col :span="21">
                    <div>
                        {{datahtml._id}}
                    </div>
                </el-col>                
            </el-row>
            
            <el-row style="padding:5px 0;border-bottom:1px solid #ddd;" v-for="(item,index) in datahtml._source" :key="index">
                <el-col :span="3">
                    <div>
                        <el-tag>{{index}}</el-tag>
                    </div>
                </el-col>                
                <el-col :span="21">
                    <div v-html="item">
                    </div>
                </el-col>                
            </el-row>
        </div>
    </div>
    
</div>
</template>

<script setup>
    import {ref,reactive} from 'vue'
    import {useRoute} from 'vue-router'
    const route = useRoute()
    let type = route.params.type;
    let datajson = ref('')
    let datahtml = reactive({})
    if(type=='json'){
        datajson = localStorage.data
    }else{
        datahtml = JSON.parse(localStorage.data)
        console.log(datahtml);
    }


</script>
<style scoped>


</style>